<template>
	<view class="body">
		<view class="tablist">
			<view :class="{active:item.status == currentIndex}"  v-for="(item,index) in tableList" @tap="currentIndex = item.status">
				<view>{{item.name}}</view>
			</view>
		</view>
	
		<!-- 退单 -->
		<view class="card" v-for="item in orderReturn" v-if="currentIndex == 4">
			<view class="top">
				<view class="code">{{item.orderSn}}</view>
				<view class="status" :style="{color:(item.status == 2 || item.status == 3) ? 'red':''}" @tap="go(item.id)">{{item.status | returnstatus}}</view>
			</view>
			<view class="content">
				<image class="img" :src="item.productPic"></image>
				<view class="info">
					<view class="p1">
						<view class="title">{{item.productName}}</view>
						<view class="price">{{item.productPrice}}</view>
					</view>
					<view class="p2">
						<view class="id">编号：{{item.orderId}}</view>
						<view class="number">x{{item.productCount}}</view>
					</view>
					<view class="p3">规格
						<view class="text" v-for="item1 in item.productAttr">
							<view>{{item1.key}}:</view>
							<view>{{item1.value}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="time">时间：{{item.createTime}}</view>
				<view class="totalprice">合计：￥{{item.productPrice}}</view>
			</view>

		</view>

		<!-- 订单 -->
		<view class="card" v-for="item in lists" v-else>
			<view class="top">
				<view class="code">{{item.order.orderSn}}</view>
				<view class="status">{{item.order.status | statusText}}</view>
			</view>
			<view class="content" v-for="(ele,index) in item.items" :key="ele.index">
				<image class="img" :src="ele.productPic"></image>
				<view class="info">
					<view class="p1">
						<view class="title">{{ele.productName}}</view>
						<view class="price">{{ele.productPrice}}</view>
					</view>
					<view class="p2">
						<view class="id">编号：{{ele.id}}</view>
						<view class="number">x{{ele.productQuantity}}</view>
					</view>
					<view class="p3">规格
						<view class="text" v-for="(item1,idx) in ele.productAttr" :key="item1.idx">
							<view>{{item1.key}}:</view>
							<view>{{item1.value}}</view>
						</view>
					</view>
					<view v-show="item.order.status == 2" class="p4">
						<text v-if="ele.isReturn == 0" @tap="returnOrder(ele)" >退货</text>
						<text  v-if="ele.isReturn == 1"  style="color: red;" >退货中</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="time">时间：{{item.order.createTime}}</view>
				<view class="totalprice">合计：￥{{item.order.totalPrice}}</view>
			</view>                                                                                             
			<view class="btns">
				<view class="cancel" @tap="cancel(item.order.id)">取消订单</view>
				<view class="pay" @tap="pay(item)">付款 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import mix from "@/mixins/index.js"
	import {
		findAllOrders,
		orderReturnApplys,
		cancelOrder
	} from "../../../api/my/index.js"
	export default {
		mixins: [mix],
		data() {
			return {
				tableList: [{
						name: "待付款",
						status: 0
					},
					{
						name: "已付款",
						status: 1
					},
					{
						name: "已发货",
						status: 2
					},
					{
						name: "已收货",
						status: 3
					},
					{
						name: "申请退款",
						status: 4
					}
				],
				list: [],
				orderReturn: [],
				currentIndex: 0
			}
		},
		mixins: [mix],
		onLoad() {
			this.init()
		},
		computed: {
			lists() {
				var result = "";
				var _this = this;
				if (_this.currentIndex == 3) {
					result = _this.list.filter(ele => {
						return ele.order.status == 3 || ele.order.status == 4
					})
				} else {
					result = _this.list.filter(ele => {
						return ele.order.status == _this.currentIndex
					})
				}
				return result
			}
		},
		methods: {
			cancel(val) {
				cancelOrder(val).then(res => {
					if(res.success){
						uni.showToast({
							title:"取消订单成功!",
							duration:1000
						})
						this.init()
					}
				})
			},
			pay(val){
				uni.navigateTo({
					url:"./confrimOrder/confrimOrder?id=" + val.order.id
				})
			},
			returnOrder(val){
				uni.navigateTo({
					url:`./orderBackInfo/orderBackInfo?id=${val.orderId}&skuid=${val.id}`
				})
			},
			go(val){
					uni.navigateTo({
						url:`orderBackStatus/orderBackStatus?id=${val}`
					})
			},
			init(){
				if (!this.checkLogins()) {
					return
				}
				findAllOrders().then(res => {
					console.log(res)
					res.data.orderList.forEach(ele => {
						ele.items.forEach(elet=>{
							elet.productAttr = JSON.parse(elet.productAttr)
						})
					})
					this.list = res.data.orderList
				})
				orderReturnApplys().then(result => {
					// console.log(result)
					result.data.items.forEach(ele => {
						ele.productAttr = JSON.parse(ele.productAttr)
					})
					this.orderReturn = result.data.items
				})
			}

		},
		filters: {
			statusText(val) {
				if (val == 0) {
					return "未付款"
				} else if (val == 1) {
					return "确认付款,等待发货"
				} else if (val == 2) {
					return "已退款"
				} else if (val == 3) {
					return "已收货"
				} else if (val == 9) {
					return "拒绝退货"
				} else {
					return "暂定"
				}
			},
			returnstatus(val) {
				if (val == 0) {
					return "待处理"
				} else if (val == 1) {
					return "退货中"
				} else if (val == 2) {
					return "已完成"
				} else if (val == 3) {
					return "已拒绝"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F1ECE7;
	}

	.tablist {
		position: fixed;
		left: 0;
		top: 31px;
		width: 100%;
		height: 31px;
		line-height: 31px;
		font-size: 15px;
		padding-top: 7px;
		background-color: #354e44;
		color: #fff;
		z-index: 999;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.active {
		color: #DD524B;
	}

	.card {
		width: 336px;
		padding: 18px;
		border-radius: 12px;
		background-color: #fff;
		margin: 15px auto;
		font-size: 12px;
		color: #3e3e3e;
		box-sizing: border-box;

		.top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f1ece7;
			padding-bottom: 15px;
			font-size: 12px;
			color: #3e3e3e;
		}

		.content {
			display: flex;
			justify-content: flex-start;
			border-bottom: 1px solid #f1ece7;
			padding: 15px 0;

			.img {
				width: 81px;
				height: 81px;
			}

			.info {
				width: 235px;
				margin-left: 14px;

				.p1 {
					display: flex;
					justify-content: space-between;
					align-items: center;

				}

				.p2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 11px;
					color: #8d8d8d;
					line-height: 15px;
					margin-top: 2px;
				}

				.p3 {
					font-size: 11px;
					color: #8d8d8d;
					line-height: 15px;
					margin-top: 2px;

					.text {

						display: flex;
						justify-content: flex-start;
					}
				}
				.p4{
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			margin-top: 7px;
			line-height: 18px;
			color: #3e3e3e;
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			margin-top: 10px;

			.cancel {
				width: 62px;
				height: 25px;
				font-size: 13px;
				border-radius: 5px;
				border: 1px solid #2d4f43;
				color: #2d4f43;
				line-height: 25px;
				text-align: center;
				margin-left: 16px;
			}

			.pay {
				width: 62px;
				height: 25px;
				font-size: 13px;
				border-radius: 5px;
				border: 1px solid #2d4f43;
				color: #2d4f43;
				line-height: 25px;
				text-align: center;
				margin-left: 16px;
			}
		}
	}
</style>
